<template>
<!-- 影院信息组件 -->
    <div
      v-if="cinemasList"
      class="bianduan"
      :style="{ height: height }"
    >
      <ul class="cinema-list">
        <li v-for="date in cinemasList" :key="date.cinemaId">
          <div>
            <div class="left">
              <div class="cinema-name">{{ date.name }}</div>
              <div class="cinema-address">{{ date.address }}</div>
            </div>
            <div class="right">
              <span class="price-fmt"> ￥{{ date.lowPrice / 100.0 }}起 </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  props: {
    cinemasList: {
    //    type: String,
      default: null,
    },
    height:{
        type:String,
        default: '480px'
    }
  },
  mounted(){
    // 计算最外围box的高度(verted.vue中) 减 导航栏高度   
        // console.log(document.querySelector('#box-h').offsetHeight);
        // this.height = document.querySelector('#box-h').offsetHeight-
        //     this.$refs.navbar.$el.offsetHeight-
        //     document.querySelector('#nav-h').offsetHeight+'px';
        // console.log(this.height);
  }
};
</script>

<style lang="scss" scoped>
.bianduan {
  // height: 100%;
  overflow: hidden;
  position: relative;
}
.cinema-list {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    height: 42px;
    position: relative;
    background-color: #fff;
    padding: 15px;
    // display: flex;
    // justify-content: space-between;
  }
  .left {
    width: calc(100% - 65px);
    width: 15rem;
    text-align: left;
    // padding-right: 18px;
    float: left;
    .cinema-name {
      color: #191a1b;
      font-size: 15px;
      // float: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cinema-address {
      color: #797d82;
      font-size: 15px;
      margin-top: 5px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .right {
    width: 80px;
    text-align: center;
    float: right;
    margin-right: -5px;
    position: absolute;
    right: 1rem;
    .price-fmt {
      font-size: 17px;
      color: #ff5f16;
      height: 0 !important;
      display: inline-table !important;
    }
  }
}
</style>